<script setup>
	import { onMounted, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import ApiDebugger from './ApiDebugger.vue'
	import { useApiDatasetStore } from '@/views/plugin/dashboard/store/apiDataset'

	const store = useApiDatasetStore()
	const apiDebuggerRef = ref()

	// 模拟数据连接器配置
	const mockConnectorConfig = {
		id: 'demo-connector-1',
		dataConnectorId: 'demo-connector-1',
		datasetId: 'demo-dataset-1',
		itemConfig: {
			apiPath: '',
			apiMethod: 'GET',
			apiParams: {},
			selectedColumns: [],
			formatConfig: {}
		}
	}

	// 初始化演示
	const initDemo = () => {
		// 设置模拟的连接器信息
		store.setConnectorInfo({
			id: 'demo-connector-1',
			name: 'API调试演示连接器',
			type: 'LOCAL_API',
			config: {
				baseUrl: 'http://localhost:8200',
				method: 'GET',
				enablePermissionCheck: true,
				excludeSystemApis: true,
				allowedModules: ['dashboard', 'sys']
			}
		})

		// 打开调试器
		if (apiDebuggerRef.value) {
			apiDebuggerRef.value.onOpen(mockConnectorConfig)
		}
	}

	// 处理响应数据变化
	const handleResponseChange = (responseData) => {
		console.log('API响应数据:', responseData)
		if (responseData && Array.isArray(responseData) && responseData.length > 0) {
			message.success(`成功获取 ${responseData.length} 条数据`)
		}
	}

	// 发送测试请求
	const sendTestRequest = () => {
		if (apiDebuggerRef.value) {
			apiDebuggerRef.value.sendRequest()
		}
	}

	// 获取当前配置
	const getCurrentConfig = () => {
		if (apiDebuggerRef.value) {
			const config = apiDebuggerRef.value.getConfig()
			console.log('当前配置:', config)
			message.info('配置已输出到控制台')
		}
	}

	onMounted(() => {
		initDemo()
	})
</script>

<template>
	<div class="api-debugger-demo">
		<!-- 演示说明 -->
		<div class="demo-header">
			<div class="demo-title">
				<h2>API调试器演示</h2>
				<p class="demo-description">
					这是一个参考 Apifox 设计的 API 调试页面组件，支持 GET 请求调试、参数配置、系统级占位符等功能。
				</p>
			</div>
			<div class="demo-actions">
				<a-space>
					<a-button @click="sendTestRequest"> 发送测试请求 </a-button>
					<a-button @click="getCurrentConfig"> 获取当前配置 </a-button>
					<a-button @click="initDemo"> 重新初始化 </a-button>
				</a-space>
			</div>
		</div>

		<!-- 功能特性说明 -->
		<div class="demo-features">
			<div class="features-title">功能特性</div>
			<div class="features-grid">
				<div class="feature-card">
					<div class="feature-icon">🚀</div>
					<div class="feature-title">仅支持 GET 请求</div>
					<div class="feature-desc">简化界面，专注于数据查询场景</div>
				</div>
				<div class="feature-card">
					<div class="feature-icon">⚙️</div>
					<div class="feature-title">自动参数识别</div>
					<div class="feature-desc">通过接口元数据自动识别所需参数</div>
				</div>
				<div class="feature-card">
					<div class="feature-icon">🔧</div>
					<div class="feature-title">系统级占位符</div>
					<div class="feature-desc">支持 ${current_user_id} 等动态参数</div>
				</div>
				<div class="feature-card">
					<div class="feature-icon">📊</div>
					<div class="feature-title">多格式展示</div>
					<div class="feature-desc">JSON、Raw、Preview 多种数据展示格式</div>
				</div>
				<div class="feature-card">
					<div class="feature-icon">💾</div>
					<div class="feature-title">数据导出</div>
					<div class="feature-desc">支持复制和下载响应数据</div>
				</div>
				<div class="feature-card">
					<div class="feature-icon">📱</div>
					<div class="feature-title">响应式设计</div>
					<div class="feature-desc">适配移动端和桌面端</div>
				</div>
			</div>
		</div>

		<!-- API调试器组件 -->
		<div class="demo-content">
			<api-debugger ref="apiDebuggerRef" @change="handleResponseChange" />
		</div>

		<!-- 使用说明 -->
		<div class="demo-usage">
			<div class="usage-title">使用说明</div>
			<div class="usage-steps">
				<div class="usage-step">
					<div class="step-number">1</div>
					<div class="step-content">
						<div class="step-title">选择API接口</div>
						<div class="step-desc">从下拉列表中选择要调试的API接口</div>
					</div>
				</div>
				<div class="usage-step">
					<div class="step-number">2</div>
					<div class="step-content">
						<div class="step-title">配置请求参数</div>
						<div class="step-desc">在参数面板中添加和配置请求参数，支持系统变量</div>
					</div>
				</div>
				<div class="usage-step">
					<div class="step-number">3</div>
					<div class="step-content">
						<div class="step-title">发送请求</div>
						<div class="step-desc">点击"发送"按钮执行API请求</div>
					</div>
				</div>
				<div class="usage-step">
					<div class="step-number">4</div>
					<div class="step-content">
						<div class="step-title">查看响应</div>
						<div class="step-desc">在响应区域查看返回的数据，支持多种格式展示</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.api-debugger-demo {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px;
		background: #f5f5f5;
		min-height: 100vh;
	}

	.demo-header {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 24px;
	}

	.demo-title h2 {
		margin: 0 0 8px 0;
		color: #262626;
		font-size: 24px;
		font-weight: 600;
	}

	.demo-description {
		margin: 0;
		color: #8c8c8c;
		font-size: 14px;
		line-height: 1.6;
	}

	.demo-features {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.features-title {
		font-size: 18px;
		font-weight: 600;
		color: #262626;
		margin-bottom: 16px;
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 16px;
	}

	.feature-card {
		padding: 16px;
		border: 1px solid #f0f0f0;
		border-radius: 6px;
		background: #fafafa;
		transition: all 0.2s ease;
	}

	.feature-card:hover {
		border-color: #1890ff;
		background: #f6f8ff;
	}

	.feature-icon {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.feature-title {
		font-size: 14px;
		font-weight: 600;
		color: #262626;
		margin-bottom: 4px;
	}

	.feature-desc {
		font-size: 12px;
		color: #8c8c8c;
		line-height: 1.5;
	}

	.demo-content {
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		overflow: hidden;
		height: 600px;
	}

	.demo-usage {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.usage-title {
		font-size: 18px;
		font-weight: 600;
		color: #262626;
		margin-bottom: 16px;
	}

	.usage-steps {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.usage-step {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.step-number {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #1890ff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 600;
		flex-shrink: 0;
	}

	.step-content {
		flex: 1;
	}

	.step-title {
		font-size: 14px;
		font-weight: 600;
		color: #262626;
		margin-bottom: 4px;
	}

	.step-desc {
		font-size: 12px;
		color: #8c8c8c;
		line-height: 1.5;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.api-debugger-demo {
			padding: 16px;
			gap: 16px;
		}

		.demo-header {
			flex-direction: column;
			gap: 16px;
		}

		.features-grid {
			grid-template-columns: 1fr;
		}

		.demo-content {
			height: 500px;
		}
	}
</style>
